import {Card, Col, Row} from "antd";
import {useIntl} from "@@/exports";
import styles from "./styles.css";
import item1 from '@/assets/images/product/digital/1.png'
import item2 from '@/assets/images/product/digital/2.png'
import item3 from '@/assets/images/product/digital/3.png'
import pItem1 from '@/assets/images/product/it/1.png'
import pItem2 from '@/assets/images/product/it/2.png'
import pItem3 from '@/assets/images/product/it/3.png'
import Texty from "rc-texty";

export default () => {
    const intl = useIntl();
    const getText = (id: string) => {
        return intl.formatMessage({id})
    }
    const getLocalePrefix = (option: any) => {
        return (id: any) => getText(`${option}.${id}`);
    }
    const getLocaleSuffix = getLocalePrefix('service')

    const DigitalCard = ({name}: any) => {
        const getLocaleSuffix = getLocalePrefix('service.digital')
        const imageMapper: any = {
            'item1': item1,
            'item2': item2,
            'item3': item3,
        }
        return (
            <div className={styles.card}>
                <Card bordered={false}>
                    <Row justify={'center'}><img width={200} src={imageMapper[name]} alt={name}/></Row>
                    <Row justify={'center'}><span className={styles.cardTile}>{getLocaleSuffix(`${name}.title`)}</span></Row>
                    <Row justify={'center'}><p className={styles.cardSubTile}>{getLocaleSuffix(`${name}.subtitle`)}</p>
                    </Row>
                </Card>
            </div>
        )
    }
    const ServiceCard = ({name}: any) => {
        const getLocaleSuffix = getLocalePrefix('service.profession')
        const arr = [1, 2, 3]
        const imageMapper: any = {
            'planning': pItem1,
            'PM': pItem2,
            'development': pItem3,
        }
        return (
            <Card bordered={false}  className={styles.serviceCard}>
                <Row justify={'space-between'} align={'middle'}>
                    <Col order={name === 'PM' ? 1 : 0}>
                        <Row justify={'center'}>
                            <img width={500} height={470} src={imageMapper[name]} alt={name}/>
                        </Row>
                    </Col>
                    <Col span={14}>
                        <Row><span className={styles.mainTitle}>{getLocaleSuffix(name)}</span></Row>
                        {arr.map((index) => (<>
                                <span className={styles.itemTitle}>{getLocaleSuffix(`${name}Item${index}.title`)}</span>
                                <p className={styles.suntitle}>{getLocaleSuffix(`${name}Item${index}.subtitle`)}</p>
                            </>)
                        )}
                    </Col>
                </Row>
            </Card>
        )
    }
    return (
        <div>
            <div className={styles.container}>
                <Row className={styles.mainTitle}>
                    <Texty duration={1000} mode={'sync'} type={'mask-bottom'} delay={100}>
                        {getLocaleSuffix('mainTitle')}
                    </Texty>
                </Row>
                <div>{getLocaleSuffix('subtitle').split('\n').map((text) => (
                    <p className={styles.subtitle}>
                        <Texty duration={1000} mode={'sync'} type={'mask-bottom'} delay={100}>{text}</Texty>
                    </p>)
                )}</div>
            </div>
            <div className={styles.digitalContainer}>
                <Row justify={'center'}>
                    <span className={styles.title}>{getLocaleSuffix('digital.title')}</span>
                </Row>
                <Row justify={'center'}>
                    <Col span={6}><DigitalCard name={'item1'}/></Col>
                    <Col span={6}><DigitalCard name={'item2'}/></Col>
                    <Col span={6}><DigitalCard name={'item3'}/></Col>
                </Row>
            </div>
            <div className={styles.professionContainer}>
                <Row justify={'center'}>
                    <span className={styles.title}>{getLocaleSuffix('profession.title')}</span>
                </Row>
                <div className={styles.serviceCardContainer}>
                    <ServiceCard name={'planning'}/>
                    <ServiceCard name={'PM'}/>
                    <ServiceCard name={'development'}/>
                </div>
            </div>
        </div>
    )
};
